<template>
  <div
    class="list"
    v-infinite-scroll="load"
    infinite-scroll-disabled="disabled"
    infinite-scroll-distance="10"
    :infinite-scroll-immediate="false"
    style="overflow: auto"
  >
    <div class="all">
      <div class="banbott" v-if="n === 1">
        <div class="cyle"></div>
      </div>
      <div class="banbott1" v-if="n === 2">
        <div class="cyle1"></div>
      </div>
      <div class="banbott2" v-if="n === 3">
        <div class="cyle2"></div>
      </div>
      <div class="ban">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="item in bannerlist"
              :key="item.imgId"
            >
              <img :src="url + item.imgUrl" alt="" />
            </div>
          </div>
        </div>
        <p>
          <i class="el-icon-search"></i>
          <input @click="$router.push('/searchgjc')" type="text" placeholder="输入课程关键词" name="" id="" />
        </p>
      </div>

      <div class="main">
        <section @click="change('营销')" style="margin-left: 6vw">
          <p><i class="iconfont icon-shengqian" style="color: #fec744"></i></p>
          <p>营销</p>
        </section>
        <section @click="change('开发')">
          <p><i class="iconfont icon-xiaoxi" style="color: #1082ff"></i></p>
          <p>开发</p>
        </section>
        <section @click="change('动效')">
          <p>
            <i class="iconfont icon-kaixinxingxing" style="color: #ffba00"></i>
          </p>
          <p>动效</p>
        </section>
        <section @click="change('电商')">
          <p><i class="iconfont icon-24gf-bag2" style="color: #01c700"></i></p>
          <p>电商</p>
        </section>
        <section @click="change('绘画')">
          <p><i class="iconfont icon-jiangpai-shi"></i></p>
          <p>绘画</p>
        </section>
        <section @click="change('三维')" style="margin-left: 6vw">
          <p><i class="iconfont icon-puke"></i></p>
          <p>三维</p>
        </section>
        <section @click="change('摄影')">
          <p>
            <i class="iconfont icon-a-WinnerAward" style="color: #ffba00"></i>
          </p>
          <p>摄影</p>
        </section>
        <section @click="change('影视')">
          <p><i class="iconfont icon-TV"></i></p>
          <p>影视</p>
        </section>
        <section @click="change('品牌')">
          <p><i class="iconfont icon-zhanghu" style="color: #1082ff"></i></p>
          <p>品牌</p>
        </section>
        <section @click="change('平面')">
          <p><i class="iconfont icon-shuji"></i></p>
          <p>平面</p>
        </section>
      </div>
      <div class="kuaixun">
        <img src="../../assets/kuaixun.png" alt="" />
        <Zixun class="zixun" />
      </div>
      <div class="hotlesson">
        <div class="hothea">
          <h2>热门课程</h2>
          <router-link to="/home"> 更多好课 </router-link>
        </div>
        <div class="bantwo">
          <div class="swiper mySwiper2">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="item in hotlesson"
                :key="item.id"
              >
                <img :src="url + item.imgUrl" alt="" />
                <p class="coll">{{ item.buyNum | setMath() }}人已购买</p>
                <p class="tab">{{ item.courseType }}</p>
                <p class="level">{{ item.courseLevel }}</p>
                <div class="bande">
                  <div class="deta">
                    <p>{{ item.courseName }}</p>
                    <p>
                      <i class="el-icon-user"></i>{{ item.teacher.teacherName }}
                    </p>
                  </div>
                  <h2>
                    <span>{{ item.sellPrice === 0 ? '免费' : '￥' + item.sellPrice }}</span>
                  </h2>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ready">
        <div class="hothea">
          <h2>即将开课</h2>
          <router-link to="/home"> 更多好课 </router-link>
        </div>
        <div class="less">
          <div
            v-show="i < 4"
            class="reales"
            v-for="(item, i) in readyList"
            :key="item.id"
          >
            <img :src="url + item.imgUrl" alt="" />
            <div class="detat">
              <router-link to="/">{{ item.courseName }}</router-link>
              <p><i class="el-icon-user"></i>{{ item.teacher.teacherName }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="allles">
        <div class="hea">
          <h2>全部课程</h2>
        </div>
        <div class="navv">
          <el-col>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                推荐<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  class="ellist"
                  v-for="item in tui"
                  :key="item.id"
                >
                  {{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col>
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                类型<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  class="ellist"
                  v-for="item in typelist"
                  :key="item.id"
                  :command="item.name"
                >
                  {{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col>
            <el-dropdown trigger="click" @command="handleCommandtwo">
              <span class="el-dropdown-link">
                难度<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  class="ellist"
                  v-for="item in levelList"
                  :key="item.id"
                  :command="item.name"
                >
                  {{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col>
            <el-dropdown trigger="click" @command="handleCommandthree">
              <span class="el-dropdown-link">
                价格<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  class="ellist"
                  v-for="item in priceList"
                  :key="item.id"
                  :command="item.id"
                >
                  {{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </div>
        <!-- <List :data="alllessons" /> -->
        <ul>
          <li
            v-show="i < count"
            v-for="(item, i) in pushlist"
            :key="item.id"
            class="list-item"
          >
            <div class="lesson">
              <img :src="url + item.imgUrl" alt="" />
              <section>
                <router-link
                  :to="'/lesdetail' + '?courseId=' + item.courseId"
                  >{{ item.courseName }}</router-link
                >
                <p>{{ item.courseType }}<span>|</span>{{ item.courseLevel }}</p>
                <p><i class="el-icon-user"></i>{{ item.teacherName }}</p>
              </section>
            </div>
            <p>
              <span v-if="item.sellPrice">￥</span
              >{{ item.sellPrice ? item.sellPrice : "免费" }}
            </p>
          </li>
        </ul>
      </div>
    </div>
    <p class="loading" v-if="loading">
      <i class="el-icon-loading"></i>数据加载中...
    </p>
    <p class="loading" v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
import Swiper from "swiper";
import { Banner, Holebanner, AfterLes, LesList } from "@/api";
import "swiper/css/swiper.css";
import "../../assets/icons/iconfont/iconfont.js";
export default {
  computed: {
    noMore() {
      return this.count >= this.pushlist.length;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  data() {
    return {
      url: "http://192.168.10.32/yonghao/img/",
      count: 2,
      loading: false,
      finished: false,
      n: 1,
      bannerlist: [],
      hoturl: "",
      hotlesson: [],
      readyList: [],
      page: 1,
      num: 3,
      begin: 1,
      courseLevel: null,
      courseType: null,
      priceKind: null,
      pushlist: [],
      alllessons: [],
      tui: [
        {
          id: 1,
          name: "最新",
        },
        {
          id: 2,
          name: "最热",
        },
      ],
      typelist: [
        {
          id: 1,
          name: "销售培训",
        },
        {
          id: 2,
          name: "演讲培训",
        },
        {
          id: 3,
          name: "设计培训",
        },
        {
          id: 4,
          name: "护肤培训",
        },
      ],
      levelList: [
        {
          id: 1,
          name: "初级拔高",
        },
        {
          id: 2,
          name: "中级突击",
        },
        {
          id: 3,
          name: "高级突破",
        },
      ],
      priceList: [
        {
          id: 0,
          name: "免费",
        },
        {
          id: 1,
          name: "收费",
        },
      ],
    };
  },
  mounted() {
    this.getBanner();
    this.getBannertwo();
    this.getReady();
    this.getAllList();
  },
  methods: {
    change(name) {
      this.$router.push({
        path: `/common/${name}`,
      });
    },
    getAllList() {
      LesList({
        begin: this.page * this.num - (this.num - 1),
        courseLevel: this.courseLevel,
        courseType: this.courseType,
        num: this.num,
        priceKind: this.priceKind,
      }).then((res) => {
        // console.log(res,"列表")
        this.alllessons = res.data.data;
        this.alllessons.map((item) => this.pushlist.push(item));
        // console.log(this.alllessons,"aaaaaaaa")
      });
    },
    handleCommand(command) {
      this.page = 1;
      this.courseType = command;
      LesList({
        begin: this.page * this.num - (this.num - 1),
        courseLevel: this.courseLevel,
        courseType: this.courseType,
        num: this.num,
        priceKind: this.priceKind,
      }).then((res) => {
        this.pushlist = res.data.data;
      });
    },
    handleCommandtwo(command) {
      this.page = 1;
      this.courseLevel = command;
      LesList({
        begin: this.page * this.num - (this.num - 1),
        courseLevel: this.courseLevel,
        courseType: this.courseType,
        num: this.num,
        priceKind: this.priceKind,
      }).then((res) => {
        this.pushlist = res.data.data;
      });
    },
    handleCommandthree(command) {
      this.page = 1;
      this.priceKind = command;
      LesList({
        begin: this.page * this.num - (this.num - 1),
        courseLevel: this.courseLevel,
        courseType: this.courseType,
        num: this.num,
        priceKind: this.priceKind,
      }).then((res) => {
        this.pushlist = res.data.data;
      });
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.page += 1;
        this.getAllList();
        this.loading = false;
      }, 1500);
    },

    getBanner() {
      Banner().then((res) => {
        this.bannerlist = res.data.data;
      });
      setTimeout(() => {
        var swiper = new Swiper(".mySwiper", {
          loop: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
        });
        setInterval(() => {
          if (this.n < this.bannerlist.length) {
            this.n += 1;
          } else {
            this.n = 1;
          }
        }, 2800);
      }, 1000);
    },

    getBannertwo() {
      Holebanner().then((res) => {
        // console.log(res,"hot")
        this.hotlesson = res.data.data;
      });
      setTimeout(() => {
        var swiper2 = new Swiper(".mySwiper2", {
          loop: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
        });
      }, 1000);
    },

    getReady() {
      AfterLes().then((res) => {
        // console.log(res,"ready")
        this.readyList = res.data.data;
      });
    },
  },
};
</script>

<style scoped  lang="scss">
.main section {
  width: 13vw;
  margin: 0 3vw;
  text-align: center;
  > p:nth-child(1) {
    background: rgb(247, 247, 250);
    border-radius: 60%;
    padding: 2.5vw 0;
    > i {
      font-size: 8vw;
      color: #ff7e00;
    }
  }
  > p:nth-child(2) {
    font-size: 3.8vw;
    margin-bottom: 2vw;
  }
}
.main {
  margin-top: -2vh;
  padding-top: 15vh;
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  border-radius: 3vw 3vw 0 0;
  background: #fff;
}
.all {
  position: relative;
}
.banbott {
  width: 100vw;
  height: 18vh;
  background: tomato;
  overflow: hidden;
  > .cyle {
    margin-top: 3vh;
    width: 28vw;
    height: 15vh;
    border-radius: 100%;
    background: #fff;
    opacity: 0.2;
  }
}
.banbott1 {
  width: 100vw;
  height: 18vh;
  background: rgb(55, 170, 81);
  overflow: hidden;
  > .cyle1 {
    margin-top: 3vh;
    width: 28vw;
    height: 15vh;
    border-radius: 100%;
    background: #fff;
    opacity: 0.2;
  }
}
.banbott2 {
  width: 100vw;
  height: 18vh;
  background: rgb(109, 138, 255);
  overflow: hidden;
  > .cyle2 {
    margin-top: 3vh;
    width: 28vw;
    height: 15vh;
    border-radius: 100%;
    background: #fff;
    opacity: 0.2;
  }
}
.ban {
  position: absolute;
  top: 5vh;
  padding: 3vw;
}
.hotlesson {
  margin-top: 3vw;
}
.bantwo {
  padding: 3vw;
  padding-bottom: 0;
}
.coll {
  width: 20vw;
  color: #fff;
  border-radius: 5vw;
  font-size: 3vw;
  padding: 1vw;
  background: #999;
  opacity: 0.8;
  text-align: center;
  position: absolute;
  bottom: 15vw;
  left: 5vw;
}
.tab {
  width: 20vw;
  color: #fff;
  border-radius: 5vw;
  font-size: 3.5vw;
  padding: 1vw;
  background: #999;
  opacity: 0.8;
  text-align: center;
  position: absolute;
  top: 2vw;
  left: 5vw;
}
.level {
  width: 20vw;
  color: #fff;
  border-radius: 5vw;
  font-size: 3.5vw;
  padding: 1vw;
  background: #999;
  opacity: 0.8;
  text-align: center;
  position: absolute;
  top: 2vw;
  left: 30vw;
}
.ban p {
  position: absolute;
  left: 20vw;
  bottom: -1vh;
  z-index: 2;
}
.ban p i {
  font-size: 7vw;
  position: absolute;
  left: 3vw;
  bottom: 1.3vh;
}
.ban p input {
  text-indent: 12vw;
  width: 60vw;
  height: 6vh;
  font-size: 3.5vw;
  border-radius: 5vw;
  border: none;
  outline: none;
  box-shadow: 1vw 1vw 2vw #999;
}
.kuaixun img {
  width: 100%;
}
.kuaixun {
  position: relative;
  > .zixun {
    position: absolute;
    top: 5.5vh;
    left: 20vw;
  }
}
.hothea {
  display: flex;
  justify-content: space-between;
  padding: 0 5vw;
  > h2 {
    font-size: 5vw;
  }
  > a {
    font-size: 3.5vw;
    background: rgb(236, 239, 254);
    padding: 1.5vw 2.5vw;
    border-radius: 3vw;
    color: #6d8aff;
  }
}
.bande {
  width: 94vw;
  background: linear-gradient(
    180deg,
    rgba(219, 218, 252, 1) 0%,
    rgba(219, 218, 252, 1) 0%,
    rgba(221, 220, 252, 1) 22%,
    rgba(223, 220, 251, 1) 54%,
    rgba(235, 233, 254, 1) 75%,
    rgba(244, 242, 255, 1) 100%,
    rgba(244, 242, 255, 1) 100%
  );
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1vh;
  > h2 {
    font-size: 3.5vw;
    color: #ff9d02;
    margin-top: 3vh;
    margin-right: 2vw;
    > span {
      font-size: 5vw;
    }
  }
}
.deta p:nth-child(1) {
  font-size: 3.3vw;
  font-weight: bold;
  margin-top: 1vh;
  margin-left: 4vw;
}
.deta p:nth-child(2) {
  margin-top: 1vw;
  margin-left: 4vw;
  color: #999;
  font-size: 3.5vw;
  > i {
    font-size: 4.5vw;
    color: #999;
    margin-right: 2vw;
  }
}
.ready {
  margin-top: 8vw;
  > .less {
    display: flex;
    justify-content: space-between;
    padding: 0 5vw;
    margin-top: 3vw;
    flex-wrap: wrap;
    > .reales {
      width: 42vw;
      margin-bottom: 2vw;
      > img {
        width: 100%;
      }
      > .detat a {
        color: #000;
        font-size: 3.5vw;
        font-weight: bold;
        margin-top: 2vw;
      }
      > .detat p {
        margin-top: 1vw;
        font-size: 3.5vw;
        color: #999;
      }
    }
  }
}
.allles {
  padding: 0 5vw;
  margin-top: 5vw;
  > .hea {
    > h2 {
      font-size: 5vw;
    }
  }
}
.navv {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 3vh;
}
.el-dropdown-link {
  font-size: 3.5vw;
  color: #999;
}
.ellist {
  font-size: 3vw;
  padding: 1vw 1.5vw;
}

.infinite-list-wrapper {
  margin-bottom: 13vh;
  > p {
    font-size: 3vw;
    text-align: center;
    margin-top: 2vh;
  }
}
.list {
  height: 100vh;
}
.loading {
  text-align: center;
  font-size: 3.5vw;
  margin-top: 1vw;
  margin-bottom: 13vh;
}
.list-item {
  border-bottom: 0.1vw solid #999;
  display: flex;
  padding: 5vw 0;
  justify-content: space-between;
  > p {
    font-size: 4vw;
    color: #ff9d02;
    margin-top: 10vh;
  }
  > .lesson {
    display: flex;
    > img {
      width: 40vw;
    }
    > section {
      padding: 3vw 0 0 3vw;
      > a {
        color: #000;
        font-size: 3.5vw;
        font-weight: bold;
      }
      > p:nth-child(2) {
        font-size: 3.2vw;
        color: #999;
        margin: 1.5vh 0;
        > span {
          margin: 0 2vw;
        }
      }
      > p:nth-child(3) {
        font-size: 3.2vw;
        color: #999;
        > i {
          font-size: 5vw;
          margin-right: 2vw;
        }
      }
    }
  }
}

.swiper {
  width: 94vw;
  overflow: hidden;
}
.swiper-slide {
  // text-align: center;
  font-size: 18px;
  background: #fff;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 94vw;
  height: 20vh;
  object-fit: cover;
}
.mySwiper2 .swiper-slide img {
  height: 25vh;
}
</style>